<template>

    <div class="images">
      <div class="image-tools">
        <el-button type="warning" @click="toAdd">添加</el-button>
        <el-input v-model="searchId" placeholder="通过id搜索" clearable style="width: 160px;"></el-input>
        <el-button type="primary" @click="searchimage">搜索</el-button>
      </div>
  
  
      <el-table :data="images" style="width: 100%">
        <el-table-column prop="id" label="编号" width="100" />
        <el-table-column prop="name" label="图片名称" width="200" />
        <el-table-column prop="imgUrl" label="图片路径" width="200" />
        <el-table-column  prop="height" label="图片高度" width="150" />
        <el-table-column prop="width" label="图片宽度" width="150" />
        <el-table-column prop="createTime" label="创建时间" width="150" />
        <el-table-column prop="updateTime" label="更新时间" width="150" />
          <el-table-column prop="updateTime" label="操作" width="250" >
          <template #default="scope">
            <el-button link type="primary" size="small" @click="toEdit(scope.row)">修改</el-button>
            <el-button link type="primary" size="small" @click="del(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      
    </div>
    <el-dialog v-model="dialogFormVisible" title="图片信息编辑">
      <el-form :model="image">
        <el-form-item label="图片名称" :label-width="formLabelWidth">
          <el-input v-model="image.name" autocomplete="off" />
        </el-form-item>
        <el-form-item label="图片路径" :label-width="formLabelWidth">
          <el-input v-model="image.imgUrl" autocomplete="off" />
        </el-form-item>
  
        <el-form-item label="图片高度" :label-width="formLabelWidth">
          <el-input v-model="image.height" autocomplete="off" />
        </el-form-item>
  
        <el-form-item label="图片宽度" :label-width="formLabelWidth">
          <el-input v-model="image.width" autocomplete="off" />
        </el-form-item>
  
        <el-form-item label="创建时间" :label-width="formLabelWidth">
          <el-input v-model="image.createTime" autocomplete="off" />
        </el-form-item>
        <el-form-item label="更新时间" :label-width="formLabelWidth">
          <el-input v-model="image.updateTime" autocomplete="off" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取消</el-button>
          <el-button type="primary" @click="keep">保存</el-button>
        </span>
      </template>
    </el-dialog>
  </template>s
  
  <script>
  import { defineComponent } from 'vue';
  import { ElMessage } from 'element-plus';
  import {  addimage,getAllimage,deleteimage,editimage,getOneimage,imagePage } from '../../http/image';
  import { cloneDeep } from 'lodash-es';
  
  export default defineComponent({
    data() {
      return {
        images: [],
        page: {
          total: 0,
          current: 1,
          size: 10
        },
        dialogFormVisible: false,
      
      image:{
        "createTime": "",
  "height": 0,
  "id": 0,
  "imgUrl": "",
  "name": "",
  "updateTime": "",
  "width": 0
    },
        formLabelWidth: 80,
        searchId: ''
      }
    },
    mounted() {
      this.getimagesPage(1);
  
    },
    methods: {
      toEdit(image) {
        console.log(image);
        this.dialogFormVisible = true;
        this.image = cloneDeep(image);
      },
      getimagesPage(current) {
        const data = {
          current: current,
          size: 2
        }
  
       imagePage(data).then(res => {
                console.log(res);
                const page = res.data.page;
                this.images = page.records;
                this.page = page;
            }).catch(err => {
                console.log(err);
            })
  
        },
        currentchange(current) {
            this.getimagesPage(current);
            this.page.current = current;
        },
      del(id) {
        if (confirm("是否删除") == true) 
        console.log(id);
        const params = {
          id: id
        };
        deleteimage(params)
          .then(res => {
            if (res.success) {
              this.getimagesPage(this.page.current);
            } else {
              console.log(res.msg);
              return false;
            }
          })
          .catch(err => {
            
          });
      },
      keep() {
        const image = this.image;
        if (image.id) {
          editimage(image).then(res => {
              if (res.success) {
                this.dialogFormVisible = false;
                this.getimagesPage(this.page.current);
                ElMessage.success(res.msg);
              } else {
                ElMessage.error(res.msg);
              }
            })
            .catch(err => {
              ElMessage.error('出错了');
            });
        } else {
          addimage(image)
            .then(res => {
              if (res.success) {
                this.dialogFormVisible = false;
                this.getimagesPage(this.page.current);
                ElMessage.success(res.msg);
              } else {
                ElMessage.error(res.msg);
              }
            })
            .catch(err => {
              ElMessage.error('出错了');
            });
        }
      },
      toAdd() {
        this.dialogFormVisible = true;
        this.image = {
            createTime: '',
        height: 0,
        id: 0,
         imgUrl: '',
       name: '',
       updateTime: '',
       width: 0
        };
      },
      searchimage() {
        const id = parseInt(this.searchId);
        if (isNaN(id)) {
          ElMessage.warning('请输入有效的ID');
          return;
        }
  
        console.log('Searching image with ID:', id);
  
        getOneimage(id)
          .then(res => {
            console.log('Search result:', res);
            if (res.success) {
              const image = res.data.classinfo;
              this.images = [image]; 
              this.page = {
                total: 1,
                current: 1,
                size: this.page.size
              };
            } else {
              ElMessage.error(res.msg);
            }
          })
          .catch(err => {
            ElMessage.error('出错了');
          });
      },
  
    }
  });
  </script>